@charset "utf-8";
/* 设置字符集为UTF-8 */

/* 清除所有元素的默认边距和填充 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 让所有元素的宽高包含内边距和边框 */
}

/* 设置body的尺寸，背景图像，定位以及其他属性 */
body {
    min-height: 100vh;
    width: 100%;
    background: url(../image/bei1.png) no-repeat center center fixed;
    background-size: cover;
    /* 背景图像覆盖整个背景 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 定义.box类的样式，包括尺寸，边框，背景模糊效果等 */
.box {
    width: 90%;
    max-width: 350px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    /* 背景模糊效果 */
    background: rgba(50, 50, 50, 0.2);
    /* 半透明背景色 */
    display: flex;
    /* 使用flex布局 */
    flex-direction: column;
    /* 垂直排列子元素 */
    justify-content: center;
    /* 垂直方向居中对齐 */
    align-items: center;
    /* 水平方向居中对齐 */
    border-radius: 10px;
    /* 圆角边框 */
}

/* 定义.box下的input-box类的样式 */
.input-box {
    width: 100%;
    margin-bottom: 15px;
}

/* 定义.input-box下的label元素的样式 */
.input-box label {
    font-size: 13px;
    /* 字体大小 */
    color: rgba(255, 255, 255, 0.9);
    /* 字体颜色 */
    margin-bottom: 5px;
    /* 底部边距 */
}

/* 定义.input-box下的input元素的样式 */
.input-box input {
    letter-spacing: 1px;
    /* 字符间距 */
    font-size: 14px;
    /* 字体大小 */
    width: 100%;
    /* 宽度 */
    height: 35px;
    /* 高度 */
    border-radius: 5px;
    /* 圆角边框 */
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* 边框 */
    background: rgba(255, 255, 255, 0.2);
    /* 半透明背景色 */
    outline: none;
    /* 去掉输入框聚焦时的默认样式 */
    padding: 0 12px;
    /* 内边距 */
    color: rgba(255, 255, 255, 0.9);
    /* 字体颜色 */
    transition: 0.2s;
    /* 过渡效果 */
}

/* 定义input元素聚焦时的样式 */
.input-box input:focus {
    border: 1px solid rgba(255, 255, 255, 0.8);
    /* 聚焦时边框颜色 */
}

/* 定义.box下的btn-box类的样式 */
.btn-box {
    width: 100%;
    /* 宽度 */
    display: flex;
    /* 使用flex布局 */
    flex-direction: column;
    /* 垂直排列子元素 */
    align-items: center;
}

/* 定义button元素的样式 */
.btn-box button {
    outline: none;
    /* 去掉默认样式 */
    margin-top: 10px;
}

/* 顶部边距 */